<template>
	<view>
		<u-navbar :is-back="true" title=" " :back-icon-color="vk.getVuex('$app.config.color.navbar')" :background="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}" :border-bottom="false">
			<view class="slot-wrap">
				<view class="u-flex u-row-between" style="width: 100%;">
					<view class="" style="white-space:nowrap;" :style="{color: vk.getVuex('$app.config.color.navbar')}">{{title}}</view>
					<view class="search u-flex u-row-left" @click="search" style="z-index: 1000;" :style="{color: vk.getVuex('$app.config.color.light'),background: vk.getVuex('$app.config.bg.search')}">
						<u-icon name="/static/search.png" size="28"></u-icon>
						<text class="u-p-l-15">请输入关键字搜索</text>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="" style="position: fixed;width: 100%;z-index: 9999;" :style="{top: navHeight+'rpx'}">
			<view class="" v-if="cateList.length > 3">
				<u-tabs
				:duration="0" 
				:list="cateList" 
				:is-scroll="true" 
				height="60" 
				gutter="18" 
				:active-color="vk.getVuex('$app.config.color.sec')"
				:inactive-color="vk.getVuex('$app.config.color.main')"
				:bg-color="vk.getVuex('$app.config.bg.navbar')"
				bar-height="6" 
				bar-width="40" 
				:current="cateCurrent" 
				@change="cateClick"></u-tabs>
			</view>
			<view class="" v-else>
				<u-tabs
				:duration="0" 
				:list="cateList" 
				:is-scroll="false" 
				height="70" 
				gutter="18" 
				:active-color="vk.getVuex('$app.config.color.sec')"
				:inactive-color="vk.getVuex('$app.config.color.main')"
				:bg-color="vk.getVuex('$app.config.bg.navbar')"
				bar-height="6" 
				bar-width="40" 
				:current="cateCurrent" 
				@change="cateClick"></u-tabs>
			</view>
		</view>
		<view class="u-p-t-60"></view>
		<view class="">
			<view class="">
				<view class="u-flex u-row-left u-flex-wrap u-p-l-20 u-p-t-20">
					<block v-for="(item, index) in coverList" :key="index">
						<block v-for="(item_, index_) in item.images_" :key="index_">
							<view class="tab" v-if="item_.ind != 0 && item_.ind % 18 === 0">
								<view class="" style="width: 710rpx;">
									<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
								</view>
							</view>
							<view class="tab" @click="detail(item._id, index_)">
								<!-- <image lazy-load :src="item_.img+(vk.getVuex('$setting.thumb.cover_flag')===1?vk.getVuex('$setting.thumb.cover_style'):'')" mode="aspectFill"></image> -->
								<muqian-lazyLoad width="226rpx" height="360rpx" :src="item_.img + (vk.getVuex('$setting.thumb.cover_flag') === 1 ? vk.getVuex('$setting.thumb.cover_style') : '')"></muqian-lazyLoad>
							</view>
						</block>
					</block>
				</view>
			</view>
		</view>
		
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>
		<nodata v-else height="50vh"></nodata>
		
		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1rpx;"></view>
		</view>
		
		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
		<view @click="search" class="back backSearch u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/search_t.png" style="width: 30rpx;height: 30rpx;"></image>
			<view class="text">搜索</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync()
	// px转换到rpx的比例
	let pxToRpxScale = 750 / systemInfo.windowWidth;
	// 状态栏的高度
	let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
	// 导航栏的高度
	let navigationHeight = 44 * pxToRpxScale
	// 总高度
	let navHeight = ktxStatusHeight + navigationHeight
	export default {
		data() {
			return {
				navHeight: navHeight,
				background: {
					backgroundColor: '#1F1F1F',
				},
				cateCurrent: 0,
				cateList: [{_id: 'new', name: '最新'},{_id: 'hot', name: '热门'}],
				noData: false,
				title: '',
				
				modelType: '',
				modelValue: '',
				
				navbarTop: 0,
				coverList: [],
				pageIndex: 0,
				loadStatus: 'loading',
				// 滚动的位置
				rolldistance: '',
				backShow: false,
				imageIndex: 0,
			}
		},
		async onLoad({type,value}) {
			var that = this
			that.modelType = type
			if(type=='ranking'){
				that.title = '排行榜'
				that.cateList = [{
					name: '热门榜',
				},{
					name: '点赞榜',
				},{
					name: '收藏榜',
				}]
				that.cateCurrent = value
			}else if(type=='category'){
				that.title = '分类'
				that.cateList = that.cateList.concat(await that.getCategory())
				that.cateCurrent = parseInt(value)+2
			}else if(type=='search'){
				that.title = "搜索"
				that.cateList = [{
					name: '搜索：'+value,
				}]
				that.modelValue = value
			}else if(type=='tags'){
				that.title = "标签"
				that.cateList = [{
					name: '标签：'+value,
				}]
				that.modelValue = value
			}else{
				that.title = '壁纸'
				that.cateList = that.cateList.concat(await that.getCategory())
				that.cateCurrent = 0
			}
			await that.getList()
		},
		methods: {
			detail(id,index){
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id+'&index='+index
				})
			},
			cateClick(e){
				var that = this
				that.noData = false
				that.cateCurrent = e
				that.imageIndex = 0
				that.getList(1)
			},
			async getList(on){
				let that = this;
				
				// 点击切换菜单 回复初始状态
				if(on == 1){
					that.coverList = []
					that.pageIndex = 0
				}
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				var whereJson = {
					mode: 0,
					status: 1
				}
				var sortArr = [{name: '_add_time', type: 'desc'}]
				if(that.modelType == 'search'){
					whereJson.name = that.modelValue
				}else if(that.modelType == 'ranking'){
					if(that.cateCurrent==0) sortArr = [{name: 'view', type: 'desc'}]
					else if(that.cateCurrent==1) sortArr = [{name: 'zan', type: 'desc'}]
					else if(that.cateCurrent==2) sortArr = [{name: 'coll', type: 'desc'}]
				}else if(that.modelType == 'tags'){
					whereJson.tags = that.modelValue
				}else{
					if(that.cateList[that.cateCurrent]._id === 'new') var sss;
					else if(that.cateList[that.cateCurrent]._id === 'hot') sortArr = [{name: 'view', type: 'desc'}]
					else whereJson.category_id = that.cateList[that.cateCurrent]._id
				}
				
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-cover',
						pageIndex: that.pageIndex,
						pageSize: 30,
						whereJson: whereJson,
						sortArr: sortArr,
					}
				});
				for (var i=0; i<data.rows.length;i++) {
					var images_ = []
					for (var j=0;j<data.rows[i].images.length;j++){
						images_.push({
							ind: that.imageIndex,
							img: data.rows[i].images[j]
						})
						that.imageIndex++
					}
					data.rows[i].images_ = images_
				}
				that.coverList = that.coverList.concat(data.rows)
				if(data.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(data.total == 0) that.noData = true
				else that.noData = false
			},
			async getCategory(){
				let that = this;
				
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-category',
						pageIndex: 1,
						pageSize: 500,
						whereJson: {
							mode: 0,
							status: 1
						},
						sortArr: [{name: '_add_time', type: 'asc'}],
					}
				});
				return data.rows
			},
			search(){
				uni.navigateTo({
					url: '/pages/about/search'
				})
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		},
		onPageScroll(e) {
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList()
		},
	}
</script>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx 0 0;
	}
	.search{
		background: #282828;
		height: 58rpx;
		margin-left: 30rpx;
		padding-left: 30rpx;
		border-radius: 50px;
		width: 100%;
		text{
			color: #808080;
			font-size: 13px;
		}
	}
	.menu{
		position: fixed;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 99;
		background-color: #FFFFFF;
	}
	.menus{
		position: fixed;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.tab{
		// background-color: #282828;
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		image{
			border-radius: 12rpx;
			width: 226rpx;
			height: 360rpx;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #F8DE52;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		.text{
			font-size: 12px;
		}
	}
	.backSearch{
		bottom: 200rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 100rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>
